<template>
	<!-- 日常编辑条件修改明细  和新增日常修改明细 -->
	<view>
		<view style="height: 100%;padding-top: 20rpx;padding-bottom: 200rpx;">
			<uni-forms ref="form" :modelValue="entity" label-width="110px">
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="客户名称" name="CustomerName">
						<view @click="CustomerChoice">
							<uni-easyinput v-model="entity.CustomerName" suffixIcon="compose" :adjust-position="false"
								:inputBorder="false" :disabled="disabled" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="业务性质" :rules="$rules.handle.ExpenseTypeName" required name="ExpenseTypeName">
						<uni-data-picker popup-title="请选择业务性质" :localdata="dataTree" @change="pickerChange"
							v-model="entity.ExpenseTypeName" :readonly="disabled">
						</uni-data-picker>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="票据类型" :rules="$rules.handle.BillType" required name="BillType">
						<uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
							v-model="entity.BillType" :localdata="newBillTypeOptions"
							@change="selectOptionsChange($event, 'BillType')" :disabled="disabled"></uni-data-select>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="发票分类" :rules="$rules.handle.InvoiceClassification" required
						name="InvoiceClassification">
						<uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
							v-model="entity.InvoiceClassification" :localdata="newInvoiceClassificationOptions"
							@change="selectOptionsChange($event, 'InvoiceClassification')"
							:disabled="disabled"></uni-data-select>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="票面金额" name="FaceAmount" :rules="$rules.handle.FaceAmount" required>
						<view>
							<uni-easyinput v-model="entity.FaceAmount" :inputBorder="false" type="number"
								@input="inputChange($event, 'FaceAmount')" :adjust-position="false"
								:disabled="disabled" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="报销金额" name="ReimburseAmount" :rules="$rules.handle.ReimburseAmount" required>
						<view>
							<uni-easyinput v-model="entity.ReimburseAmount" type="number"
								@input="inputChange($event, 'ReimburseAmount')" :adjust-position="false"
								:inputBorder="false" :disabled="disabled" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="票据张数" name="BillsNum">
						<view>
							<uni-easyinput v-model="entity.BillsNum" :inputBorder="false" :adjust-position="false"
								:disabled="disabled" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="是否无票支出" name="IsNoTicket">
						<radio-group @change="switchChange">
							<view style="display: flex;">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in IsNoTicketOptions"
									:key="item.value">
									<view class="flex Acenter" style="margin-right: 50rpx;margin-top: 10rpx;">
										<radio :value="item.value" :checked="item.checked" :disabled="disabled"
											style="transform: scale(0.8);" />
										<view>{{item.name}}</view>
									</view>

								</label>
							</view>
						</radio-group>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="摘要" name="ItemAbstract">
						<uni-easyinput v-model="entity.ItemAbstract" placeholder="请输入摘要" type="textarea"
							:adjust-position="false" :inputBorder="false" :disabled="disabled" />
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="附件" name="reimburse_Files">
					</uni-forms-item>
				</view>
				<!-- 上传附件 -->
				<UploadCopy ref="UploadCopy" @handlerSuccess="handlerSuccess" :parentObj="{ ...this }"
					:disabled="disabled" @handlerRmoveFile="handlerRmoveFile">
				</UploadCopy>
			</uni-forms>
		</view>
		<view v-if="!disabled" class="submitButton">
			<u-button type="primary" @click="handleSubmitDetailSave" :loading="loading">保存</u-button>
		</view>
		<!-- 引用客户组件 -->
		<Myuser @customerChoice="Client" ref="myuser" />
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";

	import {
		// 日常附件刪除
		Reimburse_FilesDeleteData
	} from "@/api/interface.js";
	//客户
	import Myuser from "../../components/Myuser.vue";
	import UploadCopy from "../../components/uploadCopy.vue"
	export default {
		components: {
			Myuser,
			UploadCopy
		},
		data() {
			return {
				// 是否无票状态
				IsBill: 0, //默认否
				loading: false,
				IsNoTicketOptions: [{
						value: '1',
						name: '是',
						checked: false
					},
					{
						value: '0',
						name: '否',
						checked: true
					}
				],
				disabled: false,
				// /上传文件列表
				reimburse_Files: [],
				Upload: [],
				// 是否展示弹窗
				show: false,
				entity: {
					BillsNum: 1
				},
				// 票据类型下拉列表数据
				newBillTypeOptions: [],
				// 费用类型下拉列表数据
				newExpenseTypeOptions: [],
				// 发票分类下拉列表数据
				newInvoiceClassificationOptions: [],
				// 所有公司下拉列表数据
				newCompayListOptions: [],
				detailData: [],
				options: {},


			}
		},
		computed: {
			...mapState(["BillTypeOptions", "ExpenseTypeOptions", "InvoiceClassificationOptions", "CompayListOptions"]),
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(function() {
				uni.hideLoading()
			}, 500)
			this.options = options
			// 判断是否是详情过来
			if (this.options.type && this.options.type === '查看') {
				this.disabled = true
				uni.setNavigationBarTitle({
					title: '查看日常明细'
				})
			}
			// 业务性质  票据类型  发票分类回显
			this.newBillTypeOptions = this.BillTypeOptions
			this.newExpenseTypeOptions = this.ExpenseTypeOptions
			this.newInvoiceClassificationOptions = this.InvoiceClassificationOptions
			this.newCompayListOptions = this.CompayListOptions
			let data = JSON.parse(options.data)
			this.entity = data.item


			// 详情里的附件数据回填
			this.reimburse_Files = this.entity.reimburse_Files
			this.detailData = data.entity.reimburse_Daily_ItemDTOs
			console.log('options-------', this.entity)
			// 编辑回显是否无票支出回显
			if (this.entity.IsBill && (this.entity.IsBill == true || this.entity.IsBill == 1)) {
				this.IsNoTicketOptions[0].checked = true
				this.IsNoTicketOptions[1].checked = false
			} else {
				this.IsNoTicketOptions[1].checked = false
				this.IsNoTicketOptions[1].checked = true
			}
		},
		onShow() {
			// 业务性质树结构数据回显
			this.dataTree = this.ExpenseTypeOptions
			if (this.entity.reimburse_Files) {
				// 处理当前传递过来的子表行明细附件回显
				this.$nextTick(function() {
					console.log('处理附件回显了---', this.entity.reimburse_Files)
					this.$refs.UploadCopy.setFileShowList(this.entity.reimburse_Files)
				})
			}

		},
		methods: {
			// 上传成功
			handlerSuccess(file, fileEntity, index) {
				console.log('日常明细表测试附件编辑参数返回', file, fileEntity, index)
				if (file.reimburse_Files.length > 0) {
					let reimburse_Files = file.reimburse_Files
					this.reimburse_Files = reimburse_Files
					this.entity.reimburse_Files = reimburse_Files
					this.entity.Upload = file.Upload
				}

			},
			// 移除附件
			handlerRmoveFile(file) {
				var that = this
				console.log('子组件传递过来开始移除文件了', this.entity, file)
				// let reimburse_Files = file.FileList.map(item => {
				// 	return {
				// 		FilePath: item.fileEntity.linkUrl
				// 	}
				// })
				// this.reimburse_Files = reimburse_Files
				// this.entity.reimburse_Files = reimburse_Files
				// this.entity.Upload = file.Upload

			},
			// 处理业务性质回显函数
			generateCArray(a, b) {
				return a.map((item, index) => ({
					text: item,
					value: b[index]
				}));
			},
			// // 处理业务性质回显
			// getExpenseTypeName(entity) {
			// 	let ExpenseTypeNameArr = entity.ExpenseTypeName.split('/')
			// 	let ExpenseTypeArr = entity.ExpenseType.split('/')
			// 	let newExpenseTypeName = this.generateCArray(ExpenseTypeNameArr, ExpenseTypeArr)
			// 	// 回显业务性质
			// 	this.$set(this.entity, 'ExpenseTypeName', newExpenseTypeName)
			// },
			// 业务性质选择事件
			pickerChange(event) {
				// 业务性质名称
				let ExpenseTypeName = event.detail.value.map(item => {
					return item.text
				}).join('/')
				let ExpenseTypeId = event.detail.value.map(item => {
					return item.value
				}).join('/')
				// 名称和id
				this.$set(this.entity, 'ExpenseTypeName', event.detail.value)
				this.$set(this.entity, 'ExpenseType', ExpenseTypeName)
				this.$set(this.entity, 'ExpenseTypeId', ExpenseTypeId)
				console.log('业务性质选择', event.detail.value, ExpenseTypeName, ExpenseTypeId, this.entity)

			},

			// 票面金额  报销金额实时输入事件
			inputChange(event, key) {

				const inputRule = /[^1-9]/g //只能输入正整数
				if (event < 0) {
					this.$nextTick(() => {
						this.$set(this.entity, key, inputRule);
					});
				}
				if (key === 'FaceAmount') {
					// 票面金额实时输入的时候 同时更新报销金额联动
					this.entity.ReimburseAmount = event
				}
			},
			// 业务性质 发票分类  费用类型下拉改变事件
			selectOptionsChange(event, key) {

				let optionsArr = []

				if (key === 'ExpenseType') {
					optionsArr = this.ExpenseTypeOptions
				} else if (key === 'BillType') {
					// 票据分类
					optionsArr = this.BillTypeOptions
				} else {
					// 发票分类
					optionsArr = this.InvoiceClassificationOptions
				}
				// 业务性质
				let ExpenseTypeName = optionsArr.filter(item => item.value === event)[0].text
				this.$set(this.entity, key + 'Name', ExpenseTypeName)
				console.log('下拉改变', event, key, ExpenseTypeName, this.entity)
			},
			// 是否无票支出改变
			switchChange(event) {
				let IsBill = event.detail.value
				this.IsBill = IsBill
				console.log('是否无票支出', this.entity)
			},

			// 保存子表
			handleSubmitDetailSave() {
				var that = this
				this.$refs.form.validate().then(res => {
					let pages = getCurrentPages() // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
					let prevPage = pages[pages.length - 2] //上一页页面实例
					let newEntity = JSON.parse(JSON.stringify(this.entity))
					// 单独处理是否无票支出和票据张数的默认值参数
					this.$set(newEntity, 'IsBill',
						this.IsBill == 1 ? true : false)
					// 单独处理票据张数  如果没有填写  默认0
					this.$set(newEntity, 'BillsNum',
						newEntity.BillsNum ? newEntity.BillsNum : 0)
					console.log('日常修改可以保存了', newEntity, )
					uni.navigateBack({
						delta: 1,
						success: () => {
							prevPage.$vm.setDetailData('edit', newEntity) // 给上一页绑定方法otherFun,传参地址id
						}
					})

				}).catch(err => {
					uni.hideLoading()
					that.loading = false
				})
			},
			//本条客户的数据
			Client(arr) {
				let CustomerNameArr = arr.map(item => {
					return item.cCusName
				})
				let CustomIdArr = arr.map(item => {
					return item.Id
				})
				let CustomerName = CustomerNameArr.join(',')
				let CustomId = CustomIdArr.join(',')
				this.$set(this.entity, "CustomerName", CustomerName);
				this.$set(this.entity, "CustomName", CustomerName);
				this.entity.CustomId = CustomId
				// 直接插入选中的下拉客户数组  用于添加行程明细选择客户使用
				this.$set(this.entity, "CustomerNameOptions", arr);
				console.log('日常修改选中的客户数据', arr, this.entity);
			},
			//选择客户
			CustomerChoice() {
				if (this.disabled) return
				this.$refs.myuser.openForm(this.entity);
			},
			init() {
				this.show = true

			},
			openForm(data) {
				this.init()
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="less" scoped>
	/* 设置 label 的样式 */
	::v-deep.uni-forms-item {
		padding-right: 40rpx !important;

		/* 例如，设置 label 的宽度和对齐方式 */
		.uni-forms-item__label {
			display: flex !important;
			justify-content: flex-end !important;
		}
	}

	// 覆盖uniapp 的 uni-data-select 央视
	::v-deep.uni-select {
		border: none !important;
	}

	// 覆盖uniapp 的 uni-data-pircker 央视
	::v-deep.input-value-border {
		border: none !important;
	}

	// 覆盖uviewform表单form-item的下边距
	::v-deep.uni-forms-item {
		margin-bottom: 0 !important;
	}

	::v-deep.uni-forms-item {
		border-bottom: 1px solid #EEE;
		padding-top: 20rpx !important;
		padding-bottom: 20rpx !important;
	}

	.submitButton {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		/*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
		height: calc(130rpx + constant(safe-area-inset-bottom));
		/* 直接扩展高度，因为padding-bottom是内边距 */
		height: calc(130rpx + env(safe-area-inset-bottom));
		/* 直接扩展高度 */
		background: #fff;
		padding-top: 10rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS>= 11.2*/
		border-top: 1px solid #e9e9e9;
		padding-left: 15px;
		padding-right: 15px;
	}
</style>